<template>
  <div>
    <el-form size="mini" :inline="true">
      <el-form-item v-for="(item, index) in searchFormArr" :key="index" :label="item.type == 'checkbox' ? '' : item.fieldName">
        <!-- ipnut -->
        <el-input v-if="item.type == 'input'" :type="item.NameType" v-model.trim="fieldArr[item.field]" :placeholder="item.placeholder" style="width: 300px"></el-input>
        <el-input v-else-if="item.type == 'inputSearch'" v-model.trim="fieldArr[item.field]" :placeholder="item.placeholder" :type="item.NameType" style="width: 350px" class="input-with-select">
          <el-button size="mini" slot="append" type="primary" @click="submitForm()"><i class="el-icon-search" style="margin-right: 5px"></i>查询</el-button>
        </el-input>
        <!-- select -->
        <el-select
          v-else-if="item.type == 'select'"
          v-model="fieldArr[item.field]"
          :placeholder="item.placeholder"
          :clearable="item.clearable === undefined ? true : item.clearable"
          :multiple="item.multiple || false"
          :filterable="item.filterable || false"
          collapse-tags
          :style="`width: ${item.width}px` || 'width: 150px;'"
          @change="selectChange(item)"
        >
          <el-option v-for="(itemOption, index) in item.option" :label="itemOption.text" :value="itemOption.id" :key="index"></el-option>
        </el-select>
        <!--任意时间范围-->
        <el-date-picker
          v-else-if="item.type == 'timePicker'"
          v-model="fieldArr[item.field]"
          :type="item.timeType || 'datetimerange'"
          :value-format="item.format || 'yyyy-MM-dd HH:mm:ss'"
          style="width: 300px"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timePicker()"
        >
        </el-date-picker>
        <!-- 级联选择器 -->
        <el-cascader v-else-if="item.type == 'cascader'" v-model="fieldArr[item.field]" clearable :options="item.option" :props="item.props" @change="submitForm"></el-cascader>
        <!-- 多选框 -->
        <el-checkbox v-else-if="item.type == 'checkbox'" v-model="fieldArr[item.field]" @change="submitForm">{{ item.fieldName }}</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="submitForm">查询</el-button>
        <el-button size="mini" @click="resetForm">重置</el-button>
        <slot name="button"></slot>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'searchui',
  props: ['searchFormArr'],
  data() {
    return {
      fieldArr: {},
    }
  },
  created() {
    this.setDefault()
  },
  methods: {
    // 表单默认值
    setDefault() {
      this.searchFormArr.forEach((item) => {
        if (item.default !== undefined) {
          this.$set(this.fieldArr, item.field, item.default)
        } else {
          this.$set(this.fieldArr, item.field, '')
        }
      })
    },
    // 搜索按钮
    submitForm() {
      this.$emit('searchParma', this.fieldArr)
    },
    // 重置
    resetForm() {
      this.setDefault()
      this.$emit('searchParma', this.fieldArr)
    },
    // 下拉选框
    selectChange(item) {
      this.$emit('change', { item, fieldArr: this.fieldArr })
      this.$emit('searchParma', this.fieldArr)
    },
    // 级联选择
    handleCascaderChange(item) {
      this.$emit('change', item, this.fieldArr)
      this.$emit('searchParma', this.fieldArr)
    },
    // 时间范围
    timePicker() {
      this.$emit('searchParma', this.fieldArr)
    },
    // 关闭弹窗清除表单
    resetFormClose() {
      this.fieldArr = {}
    },
    // 清除某项数据
    clearFormItem(key, defaultData) {
      if (defaultData || defaultData === 0) {
        this.fieldArr[key] = defaultData
      } else {
        this.fieldArr[key] = ''
      }
      this.$emit('searchParma', this.fieldArr)
    },
  },
}
</script>

<style scoped>
::v-deep .el-form.el-form--inline {
  margin-top: -10px;
}
::v-deep .el-input-group__append {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
::v-deep .el-form--inline .el-form-item {
  margin: 10px 30px 0 0;
}
</style>
